{{define "base"}}
<!DOCTYPE html>
<!-- Copyright 2015 The LUCI Authors. All rights reserved.
Use of this source code is governed under the Apache License, Version 2.0.
that can be found in the LICENSE file. -->
<html lang="en">
<meta charset="utf-8">
<meta name="google" value="notranslate">
{{ if .Reload }}
<meta http-equiv="refresh" content="{{ .Reload }}">
{{ end -}}
<title>{{template "title" .}}</title>
<link rel="stylesheet" href="/static/buildbot/css/default.css" type="text/css">
<link rel="stylesheet" href="/static/common/third_party/css/jquery-ui.min.css" type="text/css">
<link rel="stylesheet" href="/static/common/third_party/css/vis.min.css" type="text/css">
<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="LUCI" />
<script src="/static/common/third_party/js/moment-with-locales.min.js"></script>
<script src="/static/common/third_party/js/moment-timezone-with-data-2012-2022.min.js"></script>
<script src="/static/common/js/time.js"></script>
<script src="/static/common/third_party/js/jquery.min.js"></script>
<script src="/static/common/third_party/js/jquery-ui.min.js"></script>
<script src="/static/common/third_party/js/vis-custom.min.js"></script>
{{ block "favicon" . }}
<link id="favicon" rel="shortcut icon" type="image/png" href="/static/common/favicon/milo-32.png">
{{ end -}}
{{- block "head" .}}{{ end }}

<body class="interface">
  <header>
    <div>
      <a href="/" aria-label="Home page">Home</a> |
      <a href="/search" aria-label="Search page">Search</a>
      {{- range .Navi }}
        | <strong>{{ .Name.HTML }}</strong> {{ range .Links }}
          - {{ .HTML }}
        {{ end }}
      {{ end }}
    </div>
    <div>
      {{ if .IsAnonymous }}
        <a href="{{.LoginURL}}" alt="Login">Login</a>
      {{ else }}
        {{ if .User.Picture }}
          <img class="account-picture" src="{{.User.Picture}}" alt="Account Icon">
        {{ end }}
        {{ .User.Email }} |
        <a href="{{.LogoutURL}}" alt="Logout">Logout</a>
      {{ end }}
    </div>
  </header>
  <hr>
  {{template "body" .}}
  <footer>
    <hr>
      <div><img class="lucy-logo" src="https://storage.googleapis.com/chrome-infra/lucy-small.png"></div>
      <div>
        <a href="https://chromium.googlesource.com/infra/luci">LUCI</a><br>
        built: <b>{{.CurrentTime | localTime "" }}</b><br>
        version: <b>{{.AppVersion}}</b><br>
      </div>
  </footer>
</body>
<script>
$(function () {
  'use strict';
  // Do these time manipulation functions in a timeout so that the tabs render sooner.
  setTimeout(function() {
    milo.makeTimesLocal();
    milo.annotateDurations();
  }, 0);
  $(document).tooltip({
    show: false,
    hide: false
  });
});
</script>
<script>
  (function(i,s,o,g,r,a,m){i['CrDXObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://storage.googleapis.com/crdx-feedback.appspot.com/feedback.js','crdx');

  crdx('setFeedbackButtonLink', 'https://bugs.chromium.org/p/chromium/issues/entry?components=Infra%3EPlatform%3EMilo');

(function(window) {
  let lastWindowScrollTop = window.scrollY;

  function debounce(f, wait) {
    let timeout;
    return function(...args) {
      if (timeout) {
        clearTimeout(timeout);
      }
      timeout = setTimeout(() => {
        f(...args);
        timeout = null;
      }, wait);
    };
  }

  window.addEventListener('scroll', debounce(function(evt) {
    const delta = window.scrollY - lastWindowScrollTop;
    lastWindowScrollTop = window.scrollY;
    const absDelta = Math.abs(delta);
    const category = window.location.pathname.split('/').slice(0, 2).join('/');
    ga('send', 'event', category, 'scroll-abs', '', absDelta);
    if (delta > 0) {
      ga('send', 'event', category, 'scroll-down', '', absDelta);
    } else {
      ga('send', 'event', category, 'scroll-up', '', absDelta);
    }
  }, 250));
})(window);
</script>
{{ .Analytics }}
</html>
{{end}}
